import React from "react";
import "./index.css";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import { Button, Layout, Menu, theme, Avatar, Dropdown } from "antd";
import {useDispatch}from 'react-redux'
import{setCollapesed} from '../../store/tab/index'
const { Header, Sider, Content } = Layout;

export default function Index({collapsed}) {
  const dispatch=useDispatch()
  console.log(dispatch,'dispatch');
  const items = [
    {
      key: "1",
      label: (
        <a target="_blank" rel="noopener noreferrer">
          个人中心
        </a>
      ),
    },
    {
      key: "2",
      label: (
        <a target="_blank" rel="noopener noreferrer">
          退出
        </a>
      ),
    },
  ];


  return (
    <div>
      <Header className="header">
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={() =>{dispatch(setCollapesed())}}
          style={{
            fontSize: "16px",
            width: 64,
            height: 32,
            background: "#fff",
          }}
        />
        <Dropdown
          menu={{
            items,
          }}
        >
          <Avatar size={36} src={require("../../assets/image/2.png")}></Avatar>
        </Dropdown>
      </Header>
    </div>
  );
}
